function Enlarge(containerEle){
    // 传入最大的节点 里面的小节点 就可以通过containerEle来获取
    this.containerEle = containerEle;
    // show 的区域 ,也就是 中间大小图的区域
    this.showEle = this.containerEle.querySelector(".show");
    // 遮罩层区域
    this.maskEle = this.containerEle.querySelector(".mask");
    // 大图区域
    this.enlargeEle = this.containerEle.querySelector(".enlarge");
    this.showOrHidden();  //一旦在外部调用new实例化了那么就自动调用showOrHidden方法
}

// 1、鼠标移入 遮罩层和 放大图都需要显示，鼠标移除的时候 遮罩层和放大图隐藏
Enlarge.prototype.showOrHidden = function(){
    // 鼠标移入的时候显示，遮罩层 和 大图区域
    // this 在构造函数或者原型方法里 都指向 实例化对象
    // this在事件触发的函数里会指向事件源
    // 2种方式 1.通过that=this  2. 通过箭头语法
   
    this.showEle.onmouseenter = ()=>{
        this.maskEle.style.display = "block";
        this.enlargeEle.style.display = "block";
    }
    // 鼠标移除的时候隐藏
    this.showEle.onmouseleave = ()=>{
        this.maskEle.style.display = "none";
        this.enlargeEle.style.display = "none";
    }

}



